<template>
  <div @click="clickDisabled" :class="{ is_disabled: disabled }">
    <div class="score_only">
      <div class="only_title" @click="checkHistory">
        <span>{{ sortIndex }}、</span>
        <div>{{ userInfoData.userName }}</div>
      </div>

      <div
        class="estimate_equal"
        v-if="userInfoData.status == 0"
        @click.stop="urgeSub('1')"
        :style="userInfoData.isUrge == '0' ? 'color: #D7D7D7;' : ''">
        <span v-if="userInfoData.isUrge == '0'">已催报</span>
        <span v-else>催报</span>
      </div>
      <div class="estimate_equal equal_eva" @click="estimateClick" v-else>
        领导点评
        <van-icon :name="estimateShow ? 'arrow-down' : 'arrow-up'" />
      </div>
    </div>
    <div class="sugg_choose">
      <div
        class="li"
        :class="{ active_li: activeId == item.id }"
        v-for="item in resultList"
        :key="item.id"
        @click="chooseAssessSugg(item)">
        {{ item.name }}
      </div>
    </div>
    <div class="estimate" v-show="estimateShow">
      <!-- 选择较差时原因填写 -->
      <div class="instruction" v-if="activeId === '4'">
        <div class="name">备注</div>
        <div class="content">
          <van-field
            v-model="remark"
            rows="2"
            autosize
            type="textarea"
            placeholder="选择较差时需要输入原因"
            :readonly="disabled" />
        </div>
      </div>
      <ScoreTable
        :totalScore="totalScore"
        :userInfo="userInfoData"
        v-bind="$attrs"
        v-if="busSign.includes('DEAL_MAIN_LEADER_ASSESS')"></ScoreTable>
      <div class="score_extra">
        <div class="extra_title">
          <span class="title-text">承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现</span>
        </div>
        <div class="extra_content">
          <BoardSound :listData="extraData" :entry="!disabled"></BoardSound>
        </div>
      </div>
      <div class="leader_reviews">
        <div class="reviews_title">
          <span class="title-text">领导点评</span>
          <span v-if="activeId == '3'" class="reviews-tips">(等次为“一般”，需要填写说明)</span>
        </div>
        <div class="reviews_content">
          <BoardSound :listData="reviewsaData" :entry="!disabled"></BoardSound>
        </div>
      </div>
    </div>
    <van-dialog v-model="historyShow" title="历史评价" class="history-dialog">
      <history-table :quarterNow="quarterNow" :tableData="tableData" v-if="historyShow"></history-table>
    </van-dialog>
  </div>
</template>

<script>
import BoardSound from '@com/BoardSound'
import ScoreTable from './ScoreTable.vue'
import HistoryTable from './HistoryTable.vue'
import { getUserHistoryAssessData } from '@api/api-comment.js'
import { saveUrgeByNeedDeal } from '@api/api-documentary.js'

export default {
  name: 'ScoreOptionOnly',
  components: {
    BoardSound,
    ScoreTable,
    HistoryTable,
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
    sortIndex: {
      type: Number,
      default: 0,
    },
    rollListAll: {
      type: Array,
      default: () => [],
    },
    goodNum: {
      type: Number,
      default: 0,
    },
    quarterNow: Number,
    showHistory: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      extraData: {
        id: '',
        title: '',
        entryCont: '',
        audioList: [],
      },
      reviewsaData: {
        id: '',
        title: '',
        entryCont: '',
        audioList: [],
      },
      totalScore: '',
      estimateShow: false,
      userInfoData: {},
      resultList: [
        { id: '1', name: '好' },
        { id: '2', name: '较好' },
        { id: '3', name: '一般' },
        { id: '4', name: '较差' },
      ],
      activeId: '',
      disabled: false,
      busSign: '',
      remark: '',
      chooseGoodNum: 0,
      historyShow: false,
      tableData: {},
    }
  },
  computed: {},
  watch: {
    userInfo: {
      handler(news) {
        this.userInfoData = news
        this.extraData = this.userInfoData.extraData
        this.reviewsaData = this.userInfoData.reviewsaData
        if (
          this.userInfoData.status == 0 ||
          this.userInfoData.status == 3 ||
          (this.userInfoData.leaderAssessScore && this.userInfoData.leaderAssessScore < 100)
        ) {
          this.disabled = true
        } else {
          this.disabled = false
        }
        this.activeId = this.userInfoData.assessRank || this.userInfoData.mainLeaderAssessRank
        this.remark = this.userInfoData.remark
      },
      deep: true,
      immediate: true,
    },
    extraData: {
      handler(news) {
        this.userInfoData.extraData = news
      },
      deep: true,
    },
    reviewsaData: {
      handler(news) {
        this.userInfoData.reviewsaData = news
      },
      deep: true,
    },
    remark: {
      handler(news) {
        this.userInfoData.remark = news
      },
      deep: true,
    },
    activeId: {
      handler(news) {
        this.$nextTick(() => {
          this.assessFilter(news)
        })
      },
      deep: true,
      immediate: true,
    },
    rollListAll: {
      handler(news) {
        let rollList = []
        news.forEach(item => {
          item.userAssessDataResponseVOS.forEach(li => {
            rollList.push(li)
          })
        })
        const arr = rollList.filter(item => {
          return item.assessRank === '1'
        })
        this.chooseGoodNum = arr.length
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.busSign = this.$route.query.busSign
  },
  mounted() {},
  methods: {
    chooseAssessSugg(item) {
      if (this.disabled) return
      if (this.busSign.includes('DEAL_MAIN_LEADER_ASSESS') && !this.userInfoData.leaderAssessRank) {
        if (this.busSign === 'DEAL_MAIN_LEADER_ASSESS_11') {
          return this.$toast.fail('分管负责人未评分')
        } else if (this.busSign === 'DEAL_MAIN_LEADER_ASSESS_10') {
          return this.$toast.fail('部门负责人未评分')
        } else {
          return this.$toast.fail('分管领导未评分')
        }
      }
      if (item.id === '1' && this.chooseGoodNum >= this.goodNum) {
        const str = `本次拟评价“好”等次${this.goodNum}人，现已${this.goodNum}人，如需评定为“好”，请更改其他评价`
        return this.$toast.fail(str)
      }
      if (item.id == 3) {
        this.$toast.fail('等次为“一般”，需要填写领导点评')
        this.estimateShow = true
      }
      if (item.id == 4) {
        this.$toast.fail('等次为“较差”，需要填写备注说明')
        this.estimateShow = true
      }
      this.activeId = item.id
      this.userInfoData.assessRank = item.id
      this.userInfoData.mainLeaderAssessRank = item.id
    },
    estimateClick() {
      // if (this.disabled) return
      this.estimateShow = !this.estimateShow
    },
    clickDisabled() {
      if (this.disabled) {
        // this.$toast.fail('该成员季度总结尚未提交，不能进行考核评价操作')
      }
    },
    assessFilter(news) {
      if (news == 1) {
        this.totalScore = 100
      } else if (news == 2) {
        this.totalScore = 80
      } else if (news == 3) {
        this.totalScore = 60
      } else if (news == 4) {
        this.totalScore = 0
      }
      this.userInfoData.assessRank = news
      this.userInfoData.totalScore = this.totalScore
      this.userInfoData.mainLeaderAssessScore = this.totalScore
    },
    urgeSub() {
      if (this.userInfoData.isUrge == '0') {
        return
      }
      this.goUrge()
    },
    // 催报
    goUrge() {
      let that = this
      let message = '您确定要进行催报吗？'
      that.$dialog
        .confirm({
          title: '提示',
          message: message,
        })
        .then(() => {
          saveUrgeByNeedDeal({
            needId: this.$route.query.needId,
            type: 1,
            urgeUserId: that.userInfoData.userId,
            optionUserId: localStorage.userId,
            tenantId: localStorage.tenantId,
          })
            .then(res => {
              if (res.status === 200) {
                that.userInfoData.isUrge = '0'
              }
            })
            .catch(err => {})
        })
        .catch(() => {
          // on cancel
        })
    },
    checkHistory() {
      if (this.quarterNow > 0 && this.showHistory) {
        getUserHistoryAssessData({
          needId: this.$route.query.needId,
          userId: this.userInfoData.userId,
        }).then(res => {
          const data = {
            ...res.data[0].userAssessDataResponseVOS[0],
            showMode: res.data[0].showMode,
          }
          this.tableData = data
          this.historyShow = true
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.score_type {
  font-size: 14px;
  padding-bottom: 25px;
  .instruction {
    display: flex;
    align-items: stretch;
    margin: 6px;
    margin-top: 15px;
    .name {
      margin-right: 12px;
      width: 60px;
      min-width: 60px;
      display: flex;
      justify-content: center;
      padding-top: 5px;
      align-items: flex-start;
    }
    .content {
      flex: 1;
      border: 1px solid #cccccc;
      padding: 0 5px;
      border-radius: 5px;
    }
  }
  .score_extra {
    margin-top: 15px;
    .extra_content {
      margin-top: 10px;
      .entry_sound {
        box-shadow: none;
        border: 1px solid #ccc;
      }
    }
  }
  .leader_reviews {
    margin-top: 15px;
    .reviews_title {
      .reviews-tips {
        color: #999999;
      }
    }
    .reviews_content {
      margin-top: 10px;
      .entry_sound {
        box-shadow: none;
        border: 1px solid #ccc;
      }
    }
  }
  .score_only {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .only_title {
      display: flex;
      align-items: center;
      span {
        font-weight: bold;
        font-size: 16px;
      }
    }
    .estimate_equal {
      color: #0f61d5;
    }
  }
  .sugg_choose {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 12px;
    .li {
      width: 71px;
      height: 27px;
      background: #f5f5f5;
      border-radius: 3px;
      color: #999999;
      text-align: center;
      line-height: 27px;
    }
    .active_li {
      background: #0f61d5;
      color: #ffffff;
    }
  }
}
.is_disabled {
  color: #999999;
  .only_title {
    color: #999999 !important;
    span {
      color: #999999 !important;
    }
  }
  .sugg_choose {
    .li {
      color: #999999 !important;
    }
    .active_li {
      background-color: #cccccc !important;
      color: #ffffff !important;
    }
  }
}
/deep/.history-dialog {
  .van-dialog__header {
    color: #1989fa;
    font-weight: bold;
  }
}
</style>
